<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文档中心</title>
    <!-- zui css -->
    <link rel="stylesheet" th:href="@{/zui/css/zui.min.css}">
    <link th:href="@{/zui/lib/dashboard/zui.dashboard.min.css}" rel="stylesheet">
    <link th:href="@{/zui/lib/DataTables-1.10.21/media/css/jquery.dataTables.min.css}" rel="stylesheet">
    <!-- jquery js -->
    <script th:src="@{/zui/lib/jquery/jquery.js}"></script>
    <!-- zui js -->
    <script th:src="@{/zui/js/zui.min.js}"></script>
    <style>
        body .wraper-bg {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .wraper-bg {
            display: flex;

        }

        .left-menu {

            flex-basis: 200px;
            background: #f5f6f7;
            min-height: 100vh;
        }

        .right-content {
            flex: 1;
        }

        .left-menu .title {
            height: 100px;
            display: flex;
            align-items: center;

        }

        .left-menu .title img {
            margin-right: 10px;
            margin-left: 10px;
        }

        .left-menu .title span {
            font-size: 12px;
            font-weight: bold;

        }
        .toolbars{
            display: flex;
            justify-content: space-between;
            height: 35px;
            margin: 10px 10px;
        }

    </style>
</head>
<body>
<div class="container-fluid wraper-bg">
    <div class="left-menu">
        <div class="title">
            <img th:src="@{/zui/icons/robot_64.png}" width="32px" height="32px" alt="机器人云文档">
            <span>机器人云文档</span>
        </div>
        <nav class="menu" data-ride="menu" style="width: 200px">
            <ul id="treeMenu" class="tree tree-menu" data-ride="tree">
                <li ><a th:href="@{/}"><i class="icon icon-th"></i>首页</a></li>
                <li><a th:href="@{/app/my/info}"><i class="icon icon-user"></i>个人资料</a></li>
                <li class="active"><a th:href="@{/app/my/docs}"><i class="icon icon-user"></i>云文档</a></li>
                <li ><a th:href="@{/app/my/community}"><i class="icon icon-user"></i>我的社团</a></li>
                <li>
                    <a href="#"><i class="icon icon-time"></i>更新时间</a>
                    <ul>
                        <li><a href="#">今天</a></li>
                        <li><a href="#">明天</a></li>
                        <li><a href="#">昨天</a></li>
                        <li><a href="#">本周</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="icon icon-trash"></i>垃圾篓</a></li>
                <li><a href="#"><i class="icon icon-list-ul"></i>全部</a></li>
                <li class="open">
                    <a href="#"><i class="icon icon-tasks"></i>状态</a>
                    <ul>
                        <li>
                            <a href="#"><i class="icon icon-circle-blank"></i>已就绪</a>
                            <ul>
                                <li><a href="#">已取消</a></li>
                                <li><a href="#">已关闭</a></li>
                            </ul>
                        </li>
                        <li ><a href="#"><i class="icon icon-play-sign"></i>进行中</a></li>
                        <li><a href="#"><i class="icon icon-ok-sign"></i>已完成</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>
    <div class="right-content">
        <nav class="navbar" role="navigation">
            <div class="container-fluid">
                <!-- 导航头部 -->
                <div class="navbar-header">
                </div>
                <!-- 导航项目 -->
                <div class="collapse navbar-collapse navbar-collapse-example">
                    <!-- 右侧的导航项目 -->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a th:href="@{/app/my}"><i class="icon icon-user"></i>吴宗波</a></li>
                    </ul>
                </div><!-- END .navbar-collapse -->
            </div>
        </nav>
        <div class="toolbars">
            <ol class="breadcrumb">
                <li><a th:href="@{/app/my/docs}">云文档</a></li>
            </ol>
            <a class="btn btn-primary"  th:href="@{/app/my/docs/create}">新建</a>
        </div>
        <div id="dashboard" class="dashboard dashboard-draggable">
            <section class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="panel">
                        <div class="panel-heading">
                            <div class="panel-actions">
                                <button type="button" class="btn remove-panel" data-toggle="tooltip" title="关闭"><i
                                        class="icon-remove"></i></button>
                            </div>
                        </div>
                        <div class="panel-body">
                            <p>内容</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </div>

</div>
<script th:src="@{/zui/lib/dashboard/zui.dashboard.min.js}"></script>
<script th:src="@{/zui/lib/DataTables-1.10.21/media/js/jquery.dataTables.min.js}"></script>
<script type="text/javascript">
    // 手动通过点击模拟高亮菜单项
    $('#treeMenu').on('click', 'a', function () {
        $('#treeMenu li.active').removeClass('active');
        $(this).closest('li').addClass('active');
        let li=$(this).closest('li');

        console.log(li[0].innerText,li[0].children[0].baseURI);


    });
    var options = {
        height: 200,
        // 设置更多选项...
    };
    $('#dashboard').dashboard(options);
</script>

</body>
</html>